<template>
  <div class="post-demo">
    <div class="post-container">
      <div class="container-title">
        <div class="title">
          <router-link
            :to="{
              name: targetRoutePersonCenter,
              query: {
                id: postUserID,
              },
            }"
            target="_blank"
          >
            <div class="title-container">
              <div class="header-pic-name">
                <img
                  src="@/assets/szptImages/images/builderHeader.png"
                  alt="头像已丢失..."
                  v-if="!userDTO.data.avatar"
                />
                <img
                  :src="userDTO.data.avatar"
                  alt="头像已丢失..."
                  v-if="userDTO.data.avatar"
                />
              </div>
              <div class="name">
                <!-- 用户名 -->
                <span>{{ userDTO.data.userName }}</span>
              </div>
            </div>
          </router-link>
        </div>
        <div class="concern" v-if="loadUserID == postUserID ? false : true">
          <div
            @click="changeFocusFlag(userDTO.data.userId)"
            class="concern-btn"
            v-show="!focusFlag"
          >
            关注
          </div>
          <div
            @click="changeFocusFlag(userDTO.data.userId)"
            class="cancel-concern-btn"
            v-show="focusFlag"
          >
            已关注
          </div>
        </div>
      </div>
      <div class="container-data">
        <router-link
          :to="{
            name: targetRoute,
            query: {
              id: data.id,
              title: data.title,
              type: data.type,
            },
          }"
        >
          <div class="introduce">
            <div class="introduce-title">
              <!-- 帖子标题 -->
              <span>{{ data.title }}</span>
            </div>
            <div class="introduce-data">
              {{ content.introduce }}
            </div>
          </div>
          <div class="pic-list">
            <div class="img-container">
              <img
                :src="item"
                alt=""
                v-for="(item, index) in content.titlePicFile"
                :key="index"
              />
            </div>
          </div>
        </router-link>
      </div>
      <div class="time-parse">
        <div class="container-time">
          <!-- 发布时间 -->
          <span>{{ data.createTime }}</span>
        </div>
        <div class="container-parse">
          <div class="parse-comments">
            <i class="el-icon-view"></i>
            <!-- 阅读 -->
            <span style="font-size: 18px; margin-left: 10px">{{
              countDTO.readTotal
            }}</span>
          </div>
          <div class="parse-comments">
            <i class="el-icon-chat-dot-round"></i>
            <!-- 评论 -->
            <span style="font-size: 18px; margin-left: 10px">{{
              countDTO.commentTotal
            }}</span>
          </div>
          <div class="parse-comments" @click="changeCollectFlag(data.id)">
            <i
              class="el-icon-star-off"
              style="color: rgb(0, 195, 255)"
              v-show="collectFlag"
            ></i>
            <i class="el-icon-star-off" v-show="!collectFlag"></i>
            <!-- 收藏 -->
            <span style="font-size: 18px; margin-left: 10px">{{
              collectCount
            }}</span>
          </div>
          <div class="parse-comments" @click="changeParse(data.id)">
            <i
              class="el-icon-s-opportunity"
              style="color: rgb(0, 195, 255)"
              v-show="likeFlag"
            ></i>
            <i class="el-icon-s-opportunity" v-show="!likeFlag"></i>
            <!-- 点赞 -->
            <span style="font-size: 18px; margin-left: 10px">{{
              likeCount
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
t

<script>
import { parse_collect_concern } from "@/api/szpt/parse";
import { getUserMsg } from "@/api/szpt/getUserMsg.js";
export default {
  data() {
    return {
      userDTO: this.$props.postData.userDTO,
      countDTO: this.$props.postData.countDTO,
      actionFlagDTO: this.$props.postData.actionFlagDTO,
      data: this.$props.postData.data,
      tagDTOList: this.$props.postData.tagDTOList,
      // 关注状态
      focusFlag: false,
      // 喜欢状态
      likeFlag: false,
      // 喜欢数
      likeCount: 0,
      // 收藏状态
      collectFlag: false,
      // 收藏数
      collectCount: 0,
      // 帖子数据
      content: {},
      //登录用户数据
      loadUserData: {
        data: {},
      },
      // 目标路由
      targetRoute: "szSource",
      //登录用户ID
      loadUserID: "",
      //帖子用户ID
      postUserID: "",
      //   跳转到用户中心
      targetRoutePersonCenter: "szptPersonalCenter",
    };
  },
  props: {
    postData: {
      required: true,
    },
  },

  methods: {
    // 改变收藏状态
    changeCollectFlag(id) {
      parse_collect_concern(id, "SZPT_SZPOST_SYSUSER_COLLECT")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.collectFlag) {
              this.collectCount = this.collectCount - 1;
              this.$message.success("已取消收藏！");
            } else {
              this.collectCount = this.collectCount + 1;
              this.$message.success("收藏成功！");
            }
            this.collectFlag = !this.collectFlag;
          } else {
            this.$message.error("收藏状态更新失败！");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 改变关注状态
    changeFocusFlag(userId) {
      parse_collect_concern(userId, "SZPT_SYSUSER_SYSUSER_FOCUS")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.focusFlag) {
              this.$message.success("已取消关注");
            } else {
              this.$message.success("关注成功!");
            }
            this.focusFlag = !this.focusFlag;
          } else {
            this.$message.error("状态更改失败!");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 改变点赞状态
    changeParse(id) {
      parse_collect_concern(id, "SZPT_SZPOST_SYSUSER_LIKE")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.likeFlag) {
              this.likeCount = this.likeCount - 1;
              this.$message.success("已取消点赞！");
            } else {
              this.likeCount = this.likeCount + 1;
              this.$message.success("点赞成功！");
            }
            this.likeFlag = !this.likeFlag;
          } else {
            this.$message.error("点赞状态更新失败！");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    initPostData() {
      this.likeFlag = this.$props.postData.actionFlagDTO.likeFlag;
      this.collectFlag = this.$props.postData.actionFlagDTO.collectFlag;
      this.focusFlag = this.$props.postData.actionFlagDTO.focusFlag;
      this.content = { ...JSON.parse(this.$props.postData.data.content) };
    },
  },
  mounted() {
    setTimeout(() => {
      this.initPostData();
    }, 500);
    this.likeCount = parseInt(this.$props.postData.countDTO.likeTotal);
    this.collectCount = parseInt(this.$props.postData.countDTO.collectTotal);
    const userData = JSON.parse(window.sessionStorage.getItem("userData"));
    this.loadUserData = userData;
    this.loadUserID = userData.data.userId;
    this.postUserID = this.userDTO.data.userId;
  },
};
</script>

<style lang="scss" scoped>
.post-demo {
  width: 100%;
  height: 300px;
  padding: 2%;
  border-bottom: 1px solid #f1f1f1;

  .post-container {
    width: 100%;
    height: 100%;

    .container-title {
      height: 13%;
      width: 100%;
      display: flex;

      .title {
        width: 50%;
        display: flex;
        justify-content: flex-start;

        .title-container {
          display: flex;

          .header-pic-name {
            height: 36px;
            width: 36px;
            border-radius: 18px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .name {
            line-height: 36px;
            margin-left: 10px;
            //font-weight: bold;
            color: #666;
          }
          .name:hover {
            color: rgb(0, 195, 255);
          }
        }
      }
      .concern {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        .concern-btn {
          height: 80%;
          width: 80px;
          color: white;
          text-align: center;
          line-height: 28px;
          border-radius: 10px;
          cursor: pointer;
          background-color: rgb(0, 195, 255);
        }
        .cancel-concern-btn {
          height: 80%;
          width: 80px;
          color: #999;
          text-align: center;
          line-height: 28px;
          border-radius: 10px;
          cursor: pointer;
          background-color: rgb(233, 233, 233);
        }
        .concern-btn:hover {
          background-color: rgb(85, 213, 252);
        }
      }
    }
    .container-data {
      width: 100%;
      height: 72%;
      padding: 0 40px 5px 46px;

      .introduce {
        width: 100%;
        height: 60px;

        .introduce-title {
          width: 100%;
          height: 25px;
          line-height: 25px;
          font-weight: bold;
          cursor: pointer;
          background-color: white;
        }
        .introduce-title:hover {
          color: rgb(85, 213, 252);
        }
        .introduce-data {
          height: 25px;
          font-size: 15px;
          line-height: 25px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #999;
        }
      }
      .pic-list {
        width: 100%;
        height: 130px;
        display: flex;
        overflow: hidden;
        .img-container {
          overflow: hidden;
          img {
            width: 130px;
            height: 130px;
            object-fit: cover;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 5px;
          }
        }
      }
    }
    .time-parse {
      display: flex;
      height: 15%;
      color: #999;

      .container-time {
        width: 50%;
        height: 100%;
        display: flex;
        padding-left: 46px;
        line-height: 46px;
        font-size: 17px;
        justify-content: flex-start;
      }
      .container-parse {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: flex-end;

        padding-right: 20px;
        line-height: 46px;
        font-size: 26px;
        margin-left: 20px;

        .parse-comments {
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
>
